<template>
  <div>
    <div style="background:#eee;color:#666">
      <p style="margin:0;padding:10px 0;text-align:center">
        <i
          class="iconfont icon-left"
          style="position:absolute;left:10px;height:25px;line-height:25px"
          @click="stepBack()"
        ></i>
        <span>我的收货地址</span>
      </p>
    </div>
    <div>
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        @click-item="settings(list,chosenAddressId)"
        @add="onAdd"
        @edit="addrEdit"
      />
    </div>
    <van-popup
      default-tag-text="asdf"
      v-model="addAddr"
      position="bottom"
      :style="{ height: '70%' }"
    >
      <p
        style="margin:0;text-align:center;padding:10px 0;background:#eee"
      >{{addEtidIndex===0?'添加':'编辑'}}收货地址</p>
      <van-address-edit
        :area-list="areaList"
        :address-info="addressInfo"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-area="OnchangeArea"
      />
    </van-popup>
  </div>
</template>
<script>
import areaList from "../assets/js/area.js";
// import axios from "axios";
export default {
  data: () => ({
    addAddr: false,
    chosenAddressId: 1,
    areaList: areaList,
    title: "添加",
    addEtidIndex: 0,
    searchResult: [],
    addressInfo: {},
    list: []
  }),
  mounted() {
    this.getAddrList();
  },
  methods: {
    getAddrList() {
      //获取地址列表
      this.$axios.get(`ym/member-address/list`).then(msg => {
        console.log(msg.data.records);
        let addrList = msg.data.records;
        if (msg.code === 0) {
          this.list = [];
          addrList.forEach(res => {
            this.list.push({
              id: res.id,
              name: res.receiverName,
              tel: res.phone,
              address:
                res.provinceStr +
                res.cityStr +
                res.districtStr +
                res.detailAddress,
              provinceStr: res.province,
              cityStr: res.city,
              districtStr: res.district,
              province: res.provinceStr,
              city: res.cityStr,
              district: res.districtStr,
              defaultFlag: res.defaultFlag
            });
            if (res.defaultFlag === "1") {
              this.chosenAddressId = res.id;
            }
          });
          console.log(this.list);
        }
      });
    },
    settings(item, id) {
      item.forEach(msg => {
        if (msg.id === id) {
          let data = {
            addressId: msg.id
          };
          this.$axios
            .post(`ym/member-address/set-default-address`, data, {
              headers: {
                "Content-Type": "application/json"
              }
            })
            .then(res => {
              if (res.data.code === 0) {
                //console.log(res.data.msg);
              } else {
                //console.log("默认地址设置失败");
              }
            });
        } else {
          return false;
        }
      });
    },
    addrEdit(item) {
      let addressInfo = new Object();
      this.areaList = areaList;
      this.addEtidIndex = 1;
      this.addAddr = true;
      addressInfo = {
        province: item.province,
        city: item.city,
        district: item.district,
        id: item.id,
        name: item.name,
        tel: item.tel,
        addressDetail: item.address,
        isDefault: item.defaultFlag == "1" ? true : false
      };
      this.addressInfo = addressInfo;
    },
    onAdd() {
      this.addEtidIndex = 0;
      this.addAddr = true;
    },
    stepBack() {
      this.$router.go(-1);
    },
    findKey(obj, value, compare = (a, b) => a === b) {
      return Object.keys(obj).find(k => compare(obj[k], value));
    },
    onSave(e) {
      //console.log(e)
      let data = {
        receiverName: e.name, //姓名
        phone: e.tel, //电话
        province: this.findKey(areaList.province_list, e.province), //省
        city: this.findKey(areaList.city_list, e.city), //市
        district: this.findKey(areaList.county_list, e.county), //区
        detailAddress: e.addressDetail, //详细地址
        defaultFlag: e.isDefault //是否默认
      };
      window.console.log(data);
      this.$axios.post(`ym/member-address/add`, data).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          this.$Notify({ type: "success", message: res.data.msg });
          this.addAddr = false;
          this.getAddrList();
        } else {
          this.$Notify({ type: "success", message: res.data.msg });
        }
      });
      // axios
      //   .post(`http://ltyjlp517.com/api/ym/member-address/add`, data, {
      //     headers: {
      //       Authorization: "bearer 84922b34-7f87-4b81-a396-0ac398254bf0",
      //       "Content-Type": "application/json"
      //     }
      //   })
      //   .then(msg => {
      //     console.log(msg)
      //     if (msg.code === 0) {
      //       this.$Notify({ type: "success", message: msg.data.msg });
      //       this.addAddr = false;
      //     } else {
      //       this.$Notify({ type: "success", message: msg.data.msg });
      //     }
      //     //console.log(msg);
      //   });
    },
    onDelete(item) {
      window.console.log(item);
      let sendData = {
        addressId: item.id
      };
      this.$axios.post(`ym/member-address/delete`, sendData).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          this.$Notify({ type: "success", message: res.data.msg });
          this.addAddr = false;
          this.list.forEach((msg, index) => {
            if (item.id === msg.id) {
              this.list.splice(index, 1);
            }
          });
        } else {
          this.$Notify({ type: "success", message: res.data.msg });
        }
      });
      //console.log("删除");
    },
    OnchangeArea() {
      //console.log(1);
    }
  }
};
</script>